<template>
  <div id="father">
    <div id="tit">
      <i style="color: #009688" class="el-icon-s-management"></i> <b> &nbsp; 查看车位信息</b>
    </div>
    <div id="found_box">
      <div class="select1"  style=" margin-left: 3%;margin-right: 8%">

      </div>
      <div class="text1">车位状态:</div>
      <div class="select1">
        <select id="status" class="sel">
          <option value="all">-所有状态-</option>
          <option value="0">停用</option>
          <option value="1">个人私有</option>
          <option value="2">待出租</option>
          <option value="3">已出租</option>
          <option value="4">查封</option>
        </select>
      </div>
      <div class="text2">车位价格(每小时):</div>
      <div class="select1">
        <select id="price" class="sel">
          <option value="all">-所有价格-</option>
          <option value="1">1元</option>
          <option value="2">2元</option>
          <option value="3">3元</option>
          <option value="4">4元</option>
          <option value="5">5元</option>
          <option value="6">6元</option>
          <option value="7">7元</option>
          <option value="8">8元</option>
          <option value="9">9元</option>
          <option value="10">10元</option>
        </select>
      </div>
      <div class="text1">车牌录入:</div>
      <div class="select1">
        <select id="license" class="sel">
          <option value="all">-不区分是否录入-</option>
          <option value="0">未录入车牌</option>
          <option value="1">已录入车牌</option>
        </select>
      </div>
      <input type="button" value="查询" id="found_button" onclick="show1()"/>
    </div>

    <table id="tabl">
      <thead>
        <tr>
          <th>车主</th>
          <th>每小时价格(元)</th>
          <th>分成比例</th>
          <th>车位位置</th>
          <th>录入车牌情况</th>
          <th>车位状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tb">
      </tbody>
      <tfoot>
      <!--      <tr>-->
      <!--        <td colspan="8" id="tf">-->
      <!--           <input type="button" value="1" class="pagcli"/>-->
      <!--          <input type="button" value="2" class="pag"/>-->
      <!--          <input type="button" value="3" class="pag"/>-->
      <!--        </td>-->
      <!--      </tr>-->
      </tfoot>
    </table>

  </div>
</template>

<script>
export default {
  name: "Property_Information",
  data(){
    return{
      propertyId : null
    }
  },
  created() {
    let _this=this;
    window.ye=_this.ye;
    window.show1=_this.show1
    window.luru=_this.luru
    window.inf=_this.inf
    },
  mounted(){
    this.show1()

  },
  methods:{
    inf(parkingId){
      var tab = {id: 'Property_Order_Information', name: "订单信息", view: () => import('@/sa-view/login/Property_Order_Information.vue'), params: {parkingId:parkingId}};
      this.sa_admin.showTab(tab);
    },
    luru(id){
      this.sa.ajax("/e-tenement/parking-information/updateById/"+id,{},
      function (resp){
        if(resp.data){
          this.sa.ok("成功！");
          this.show1();
        }else{
          this.sa.error("失败！");
          this.show1();
        }
      }.bind(this),
          {type : 'PUT'}
      )

    },
    ye(num){
      this.show1(num);
    },
    // show(){
    //   var i = localStorage.getItem("token");
    //   this.sa.ajax("/e-tenement/user/findByProperty/"+i,{},
    //       function (resp){
    //         $("#propertyName").html(resp.data.propertyName);
    //         this.propertyId = resp.data.propertyId;
    //         this.sa.ok("加载完成！")
    //         this.show1()
    //   }.bind(this),
    //       {type : 'get'}
    //   )},
    show1(num){
      var parkingStatus=$("#status").val();
      if(parkingStatus=="all"){
        parkingStatus=null
      }
      var parkingRent =$("#price").val();
      if(parkingRent=="all"){
        parkingRent=null
      }
      var licensePlateNumberEntering =$("#license").val();
      if(licensePlateNumberEntering=="all"){
        licensePlateNumberEntering=null
      }
        this.sa.ajax("/e-owner/parking-information/findAllIn",{
              "propertyId" :this.propertyId,
              "parkingStatus":parkingStatus,
              "parkingRent":parkingRent,
              "licensePlateNumberEntering":licensePlateNumberEntering,
              "current":num,
              "size":5
            },
          function (resp){
              var html="";
            for(var i in resp.data.chewei.records){
              var re = resp.data.chewei.records[i];
              html +="<tr>"
              for(var ii in resp.data.yonghu){
                var yh = resp.data.yonghu[ii]
                if(re.carUid!=0) {
                  if (yh.uid == re.carUid) {
                    html += "<td>"+yh.uname+"</td>"
                    break;
                  }
                }else{
                  html+="<td>无车主</td>"
                  break;
                }
              }
              html+="<td>"+re.parkingRent+"</td>"+
                  "<td>"+re.parkingProportion+"</td>"+
                  "<td>"+re.parkingAddress+"</td>"
              if(re.licensePlateNumberEntering==0){
                html+=    "<td>未录入车牌</td>"
              }else{
                html+=  "<td>已录入车牌</td>"
              }
              switch(re.parkingStatus){
                case 0:
                  html+="<td>停用</td>"
                  break;
                case 1:
                  html+="<td>个人私有</td>"
                  break;
                case 2:
                  html+="<td>待出租</td>"
                  break;
                case 3:
                  html+="<td>已出租</td>"
                  break;
                case 4:
                  html+="<td>查封</td>"
                  break;
              }
              // 0 未录入车牌 1 已录入车牌
              if(re.licensePlateNumberEntering==1){
                html+="<td><input style='color: white;width: 90%;height: 80%;font-size: 115%;background-color:#009688;' type='button' value='详情' onclick='inf("+re.parkingId+")'/></td></tr>"
              }else if(re.licensePlateNumberEntering==0 && re.parkingStatus==3){
                html+="<td><input style='color: white;width: 35%;height: 80%;font-size: 115%;background-color:#009688;' type='button' value='详情' onclick='inf("+re.parkingStatus+","+re.parkingId+")'/>" +
                    "<input style='color: black;width: 55%;height: 80%;font-size: 115%;background-color:#EEEEEE;' type='button' value='录入车牌' onclick='luru("+re.parkingId+")'/></td></tr>"
              }else{
                html+="<td><input style='color: white;width: 90%;height: 80%;font-size: 115%;background-color:#009688;' type='button' value='详情' onclick='inf("+re.parkingId+")'/></td></tr>"

              }
            }
            $("#tb").html(html);

            var html2="<tr><td colspan='8'>";
            for (let j = 0; j < resp.data.chewei.pages; j++) {
              if(j==resp.data.chewei.current-1) {
                html2 +="<input type='button' value='"+(j+1)+"' style='  background-color: #009688;\n" +
                    "  width: 5%;\n" +
                    "  height: 90%;\n" +
                    "  color: white;\n" +
                    "  border: 1px solid #009688;\n" +
                    "  margin-right: 0.3%;\n" +
                    "  margin-left: 0.3%;\n" +
                    "  margin-top: 0.3%;\n" +
                    "  margin-bottom: 0.3%;\n" +
                    "  font-size: 115%;'/>"
                this.curr =resp.data.chewei.current;
              }else {
                html2+= "<input type='button' value='"+(j+1)+"' onclick='ye("+(j+1)+")' style='background-color: #EEEEEE;\n" +
                    "  width: 5%;\n" +
                    "  height: 90%;\n" +
                    "  border: 1px solid #009688;\n" +
                    "  margin-right: 0.3%;\n" +
                    "  margin-left: 0.3%;\n" +
                    "  font-size: 115%;'/>"
              }
            }
            html2+="</td></tr>"
            $("tfoot").html(html2);

          }.bind(this),
            {type : 'get'})
    }


  }
}
</script>

<style scoped>
#father{
  background-color: white;
  width: 100%;
  height: 669px;
}
#tit{
  width:40%;
  margin-left: 30%;
  margin-top: 2%;
  height: 5%;
  text-align: center;
  font-size: 170%;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-left: #805322 5px solid;
  border-right: #805322 5px solid;
}
#found_box{
  padding-top: 1%;
  width: 80%;
  margin-top: 1.5%;
  margin-left: 10%;
  background-color: gray;
  height: 6%;
  text-indent: 20px;
  background-color: #EEEEEE;
  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
  border: 1px solid black;
}
.text1{
  width: 10%;
  font-size: 120%;
  height: 100%;
  color: black;
  float: left;
}
.text2{
  width: 17%;
  font-size: 120%;
  height: 100%;
  color: black;
  float: left;
}
.select1{
  width: 8%;
  font-size: 110%;
  height: 100%;
  float: left;
}
#found_button{
  float: right;
  margin-right: 3%;
  width: 12%;
  height: 70%;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border: 1px solid black;
  background-color: #009688;
  color: black;
}
.sel{
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border: #009688 1px solid;
  height: 70%;
  float: left;
}
#found_button:hover{
  color: white;
  border: 1px solid black;
}

option{
  width: 100px;
}
#tabl{
  margin-top: 1.5%;
  margin-left: 10%;
  width: 80%;
  border: 1px solid black;
  text-align: center;
}

th{
  border-bottom: 1px black solid;
  width: 10%;
  font-size: 115%;
}
table {
  border-spacing: 0;/*去掉单元格间隙*/
}
tfoot{
  height: 100px;
}
.pag{
  background-color: #EEEEEE;
  width: 5%;
  height: 90%;
  border: 1px solid #009688;
  margin-right: 0.3%;
  margin-left: 0.3%;
  font-size: 115%;
}
.pagcli{
  background-color: #009688;
  width: 5%;
  height: 90%;
  color: white;
  border: 1px solid #009688;
  margin-right: 0.3%;
  margin-left: 0.3%;
  margin-top: 0.3%;
  margin-bottom: 0.3%;
  font-size: 115%;
}
.shelf{
  width: 80%;
  height: 80%;
  color: white;
  font-size: 115%;
}

.modal:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 10%;
}
.modal-dialog {
  background: #fefefe;
  border: #333 solid 1px;
  border-radius: 5px;
  margin-left: -120px;
  position: fixed;
  left: 40%;
  top: -100%;
  z-index: 11;
  width: 40%;
  -webkit-transform: translate(0, -500%);
  -ms-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal-body {

  height: 150px;
  padding-top: 5%;
  padding-left: 24%;
  padding-right: 24%;
  font-size: 120%;
}
.modal-header,
.modal-footer {
  padding: 10px 20px;
}
.modal-header {
  border-bottom: #eee solid 1px;
}
.modal-header h2 {
  font-size: 20px;
}
.modal-footer {
  border-top: #eee solid 1px;
  text-align: right;
}
.bigButtons1{
  padding-left: 15%;
  padding-top: 18%;
  height: 58%;
  width: 30%;
  color: white;
  float: left;
  background-color: gray;
  font-size: 140%;
  border-radius: 8px;
  border: 5px solid  gray;
}
.bigButtons1:hover{
  border: 5px solid  #de9830;

}
.bigButtons2{
  padding-left: 15%;
  padding-top: 18%;
  height: 58%;
  width: 30%;
  color: white;
  float: right;
  background-color: #de9830;
  font-size: 140%;
  border-radius: 8px;
  border: 5px solid #de9830;
}
.bigButtons2:hover{
  border: 5px solid gray;
}
.btn {
  background: #428bca;
  border: #357ebd solid 1px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
}
.btn:hover {
  background: #357ebd;
}
.sel2{
  margin-top: 1.5%;
  border: #009688 1px solid;
  font-size: 85%;
}
#butt1{
  margin-top: 15%;
  width: 50%;
  margin-left: 25%;
  background-color: #009688;
  font-size: 120%;
  border: #009688 1px solid;
  color: white;
}
</style>